<template>
  <view class="home-container">
    <!-- 顶部欢迎区域 -->
    <view class="welcome-section">
      <view class="welcome-card card">
        <view class="welcome-text">
          <text class="greeting">{{ greeting }}</text>
          <text class="motivate">{{ motivationalText }}</text>
        </view>
        <view class="quit-status" v-if="quitDate">
          <view class="status-item">
            <text class="status-label">戒烟天数</text>
            <text class="status-value">{{ quitDays }}</text>
            <text class="status-unit">天</text>
          </view>
          <view class="status-item">
            <text class="status-label">节省金额</text>
            <text class="status-value text-success">¥{{ savedMoney }}</text>
          </view>
          <view class="status-item">
            <text class="status-label">延长寿命</text>
            <text class="status-value text-warning">{{ lifeExtended }}</text>
            <text class="status-unit">小时</text>
          </view>
        </view>
        <view class="no-quit-date" v-else>
          <text class="tip">还没有设置戒烟日期？</text>
          <button class="btn btn-primary" @click="goToRecord">设置戒烟日</button>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="features-section">
      <view class="section-title">
        <text>功能导航</text>
      </view>
      <view class="features-grid">
        <view class="feature-item" @click="goToRecord">
          <view class="feature-icon">📝</view>
          <text class="feature-text">戒烟记录</text>
        </view>
        <view class="feature-item" @click="goToGuide">
          <view class="feature-icon">📚</view>
          <text class="feature-text">戒烟攻略</text>
        </view>
        <view class="feature-item" @click="goToTools">
          <view class="feature-icon">🛠️</view>
          <text class="feature-text">辅助工具</text>
        </view>
        <view class="feature-item" @click="goToGames">
          <view class="feature-icon">🎮</view>
          <text class="feature-text">戒断娱乐</text>
        </view>
      </view>
    </view>

    <!-- 健康提示 -->
    <view class="health-section">
      <view class="section-title">
        <text>健康恢复进度</text>
      </view>
      <view class="health-card card">
        <view class="health-items">
          <view class="health-item" v-for="(item, index) in healthProgress" :key="index">
            <view class="health-icon">{{ item.name.charAt(0) }}</view>
            <view class="health-content">
              <text class="health-title">{{ item.name }}</text>
              <text class="health-desc">{{ item.description }}</text>
            </view>
            <view class="health-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: item.progress + '%', backgroundColor: item.color }"></view>
              </view>
              <text class="progress-text">{{ item.progress.toFixed(0) }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { SmokingHistory, CheckinData, HealthMetric } from '../../types/global.d.ts'
import { useSmokingHistoryStore } from '@/store/smokingHistory'
import { storeToRefs } from 'pinia'

// 响应式数据
const { quitDate, dailyCigarettes, pricePerPack, cigarettesPerPack } = storeToRefs(useSmokingHistoryStore())

// 计算属性
const greeting = computed((): string => {
  const hour = new Date().getHours()
  if (hour < 12) return '早上好！'
  if (hour < 18) return '下午好！'
  return '晚上好！'
})

const motivationalText = computed((): string => {
  const texts = [
    '每一天的坚持都是成功的一步！',
    '你的健康正在逐步恢复中！',
    '戒烟是送给自己最好的礼物！',
    '相信自己，你一定可以做到！',
    '今天也要继续加油哦！',
    '戒烟是给自己的救赎！',
    '呼吸自由空气多美好~',
    '戒烟是给家人的礼物！',
    '戒烟后接吻更甜~',
    '你，一定能成功！'
  ]
  return texts[Math.floor(Math.random() * texts.length)]
})

const quitDays = computed((): number => {
  if (!quitDate.value) return 0
  const quit = new Date(quitDate.value)
  const now = new Date()
  const diffTime = Math.abs(now.getTime() - quit.getTime())
  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
})

const savedMoney = computed((): string => {
  if (!quitDate.value || quitDays.value === 0) return '0.00'
  const dailyCost = (dailyCigarettes.value / cigarettesPerPack.value) * pricePerPack.value
  return (dailyCost * quitDays.value).toFixed(2)
})

const lifeExtended = computed((): number => {
  if (!quitDate.value || quitDays.value === 0) return 0
  // 每支烟减少11分钟寿命
  const minutesSaved = dailyCigarettes.value * quitDays.value * 11
  return Math.round(minutesSaved / 60)
})

const healthProgress = computed((): HealthMetric[] => {
  const days = quitDays.value
  const progress: HealthMetric[] = [
    {
      name: '一氧化碳清除',
      description: '血液中一氧化碳水平恢复正常',
      progress: Math.min(100, (days / 1) * 100),
      status: 'improving',
      statusText: '改善中',
      color: '#4facfe'
    },
    {
      name: '嗅觉味觉恢复',
      description: '嗅觉和味觉开始改善',
      progress: Math.min(100, (days / 3) * 100),
      status: 'improving',
      statusText: '改善中',
      color: '#00f2fe'
    },
    {
      name: '肺功能改善',
      description: '肺功能开始改善，呼吸更顺畅',
      progress: Math.min(100, (days / 30) * 100),
      status: 'improving',
      statusText: '改善中',
      color: '#fa709a'
    },
    {
      name: '心血管恢复',
      description: '心脏病风险开始降低',
      progress: Math.min(100, (days / 365) * 100),
      status: 'improving',
      statusText: '改善中',
      color: '#fee140'
    }
  ]
  return progress
})

// 导航方法
const goToRecord = (): void => {
  uni.switchTab({
    url: '/pages/record/record'
  })
}

const goToGuide = (): void => {
  uni.navigateTo({
    url: '/pages/guide/guide'
  })
}

const goToTools = (): void => {
  uni.switchTab({
    url: '/pages/tools/tools'
  })
}

const goToGames = (): void => {
  uni.navigateTo({
    url: '/pages/games/games'
  })
}
</script>
<script lang="ts">
// 微信小程序分享功能配置
export default {
  onShareAppMessage() {
    return {
      title: '戒烟伙伴 - 你的戒烟伴侣',
      path: '/pages/index/index',
      imageUrl: '/static/logo144.png'
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  padding: 20rpx;
}

.welcome-section {
  margin-bottom: 30rpx;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  
  .welcome-text {
    margin-bottom: 30rpx;
    
    .greeting {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      margin-bottom: 10rpx;
    }
    
    .motivate {
      display: block;
      font-size: 26rpx;
      opacity: 0.9;
    }
  }
  
  .quit-status {
    display: flex;
    justify-content: space-between;
    
    .status-item {
      flex: 1;
      text-align: center;
      
      .status-label {
        display: block;
        font-size: 24rpx;
        opacity: 0.8;
        margin-bottom: 8rpx;
      }
      
      .status-value {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        margin-bottom: 4rpx;
      }
      
      .status-unit {
        font-size: 20rpx;
        opacity: 0.8;
      }
    }
  }
  
  .no-quit-date {
    text-align: center;
    
    .tip {
      display: block;
      margin-bottom: 20rpx;
      opacity: 0.9;
    }
    
    .btn {
      background: rgba(255, 255, 255, 0.2);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
    }
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  color: #333;
}

.task-card {
  .task-item {
    display: flex;
    align-items: center;
    
    .task-icon {
      font-size: 40rpx;
      margin-right: 20rpx;
    }
    
    .task-content {
      flex: 1;
      
      .task-title {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 8rpx;
      }
      
      .task-desc {
        font-size: 24rpx;
        color: #666;
      }
    }
    
    .task-status {
      .status-text {
        font-size: 24rpx;
        font-weight: 500;
      }
    }
  }
}

.features-section {
  margin-bottom: 30rpx;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  
  .feature-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 40rpx 20rpx;
    text-align: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .feature-icon {
      font-size: 48rpx;
      margin-bottom: 16rpx;
    }
    
    .feature-text {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.health-section {
  margin-bottom: 30rpx;
}

.health-card {
  .health-items {
    .health-item {
      display: flex;
      align-items: center;
      margin-bottom: 25rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .health-icon {
        font-size: 36rpx;
        margin-right: 20rpx;
      }
      
      .health-content {
        flex: 1;
        margin-right: 20rpx;
        
        .health-title {
          display: block;
          font-size: 26rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
        }
        
        .health-desc {
          font-size: 22rpx;
          color: #666;
        }
      }
      
      .health-progress {
        width: 120rpx;
        
        .progress-bar {
          width: 100%;
          height: 8rpx;
          background: #f0f0f0;
          border-radius: 4rpx;
          overflow: hidden;
          margin-bottom: 8rpx;
          
          .progress-fill {
            height: 100%;
            transition: width 0.3s ease;
          }
        }
        
        .progress-text {
          font-size: 20rpx;
          color: #666;
          text-align: center;
          display: block;
        }
      }
    }
  }
}
</style>